<template>
  <div class="season-list">
    <h3>考季管理</h3>
    <div class="input_box">
      <span class="querySpans">查询条件:</span>
      <el-input v-model="selectData.name" placeholder="请输入考季名称" size="small"></el-input>
      <el-button class="selectBtn" size="small" @click="select()">查询</el-button>
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float: right;margin-right:30px"
                 @click="add">考季添加
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small">
        <el-table-column prop="id" label="ID" min-width="60" fixed></el-table-column>
        <el-table-column prop="name" label="考季名称" min-width="120">
          <template v-slot="scope">
            <span style="color:#009688;cursor:pointer" @click="editName(scope.row)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人" min-width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="200" width="200">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row.id)" size="small" style="background:#ea7c5a;color:#fff">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      selectData: {
        name: "",
      },
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      },
    };
  },
  methods: {
    //默认查询条件（条件记录
    defaultSelect(data) {
      this.selectData = data.condition.select;
      this.page_option = data.condition.page;
      this.getList();
    },
    //查询按钮
    select() {
      this.page_option.current_page = 1;
      this.selectData.name = this.selectData.name.replace(/(^\s*)|(\s*$)/g, "");
      this.getList();
    },
    //重置按钮
    reset() {
      this.selectData = {
        name: "",
      };
      this.page_option.current_page = 1;
      this.page_option.page_size = 15;
      this.getList();
    },
    getList() {
      let data = {
        name: this.selectData.name,
        pageSize: this.page_option.page_size,
        pageNum: this.page_option.current_page,
      };
      console.log(data, "请求参数");
      this.$api.education.getSeasonList(data)
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            let data = res.data;
            this.tableData = data.list;
            this.page_option.total = data.total;
          }
        });
    },
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList();
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList();
    },
    //删除
    handleDelete(id) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$api.education.seasonDelete({ id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
      }).catch(() => {
        this.$message({ type: "info", message: "已取消删除" });
      });
    },
    editName(row) {
      this.$prompt("请输入要修改的考季名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "不能为空！",
        inputValue: row.name,
      }).then(({ value }) => {
        let params = {
          "id": row.id,
          "name": value,
        };
        this.$api.education.seasonUpdate(params)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("修改成功");
              this.getList();
            }
          });

      }).catch(() => {
        this.$message.info("已取消!");
      });
    },
    add() {
      this.$router.push({ path: "/education/season/add" });
    }
  }
};
</script>
<style>
.season-list > h3 {
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: #666666;
  padding-left: 20px;
  border-left: 4px solid #fb9654;
  margin-left: 30px;
  margin-top: 68px;
  margin-bottom: 20px;

}

.season-list .input_box {
  padding: 0px 0px 0px 30px;
}

.season-list .input_box .el-input {
  width: 150px;
  margin-right: 10px;
  min-width: 100px;
}

.season-list .table {
  padding: 0px 30px 60px 30px;
}

.season-list .pagination {
  text-align: center;
  padding-top: 15px;
}

.season-list .footer {
  height: 60px;
  position: fixed;
  bottom: 0;
  right: -50px;
  width: 100%;
  text-align: center;
  background: #fff;
  z-index: 1000;
}
</style>


